<template>
  <div>
      <el-container>
      <el-aside width="150px">
        <el-menu default-active="1-4-1" router class="el-menu-vertical-demo" :collapse="isCollapse">
          <el-submenu index="my">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">首页</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="my">我的</el-menu-item>
              <el-menu-item index="you">你的</el-menu-item>
              <el-menu-item index="he">他的</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="you">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">列表</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="list">列表一</el-menu-item>
              <el-menu-item index="list1">列表二</el-menu-item>
              <el-menu-item index="list2">列表三</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>

      </el-aside>
          <div class="nav_item">
          <el-main>

            <div class="crumbs">
            <el-breadcrumb separator="=>">
              <el-breadcrumb-item :to="{ path: '/my' }">我的</el-breadcrumb-item>
              <el-breadcrumb-item  :to="{ path: '/you' }">你的</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/he' }">他的</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/list' }">列表一</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/list1' }">列表二</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/list2' }">列表三</el-breadcrumb-item>
              <el-breadcrumb-item>===</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-radio-group  v-model="isCollapse">
            <!-- <el-radio-button @click="close" :label="label">图标</el-radio-button> -->
              <el-radio-button :label="false">展开</el-radio-button>
              <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
            <router-view/>
          </el-main>
          </div>
      </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return{
      activeIndex:'',
      lable:true,
      isCollapse: false,
      label:false
    }
  },
  methods:{
    close(){
      this.lable = !this.lable
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.nav_item
{
  width: 83%;
  height: 100%;
}

.el-aside 
{
  background-color: #D3DCE6;
  height: 92vh;
}
  
.el-main 
{
  background-color: #E9EEF3;
  height: 85vh;
}

.close
{
  font-size: 25px;
}

.crumbs
{
  width: 83%;
  height: 7vh;
  display: inline-flex;
  align-items: center;
}
</style>